//---------------获取数据-------
function renderCategory() {
  axios.get('/my/category/list').then(res => {
    let { status, data } = res.data;
    if (status === 0) {
      let str = '';
      data.forEach(item => {
        str += `<tr>
       <td>${item.name}</td>
       <td>${item.alias}</td>
       <td>
         <button data-id="${item.id}"  data-name="${item.name}"  data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
         <button data-id="${item.id}" type="button" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
       </td>
     </tr>`
      });
      //循环结束,把拼接好的加到tbody中
      $('tbody').html(str);
    }
  })
}
renderCategory();


//------------删除 --------------
$('tbody').on('click', '.del', function () {
  // $(this)表示删除按钮,不表示tbody
  let id = $(this).data('id');
  layer.confirm('憨批要删老子吗? giao', function (index) {
    //do something
    //确认调用接口,发送请求
    axios.get(`/my/category/delete?id=${id}`).then(res => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
        //更新页面的数据
        renderCategory();
      }
    })
    layer.close(index);
  });
})


//------------------添加----------------
//点击添加按钮,出现弹层
// 声明一个变量，让它表示弹层；后面关闭弹层时会用到它。
let addIndex;
// 一、点击添加分类，实现弹层
$('button:contains("添加类别")').on('click', function () {
  addIndex = layer.open({
    type: 1,
    title: '添加类别',
    //设置弹出的内容
    content: $('#tpl-add').html(), // 内容在HTML中
    area: ['500px', '250px']
  });
});
//表单提交,发送ajax请求,完成添加
$('body').on('submit', '#add-form', function (e) {
  e.preventDefault();
  let data = $(this).serialize();//必须检查input的name
  axios.post('/my/category/add', data).then(res => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      renderCategory();
      layer.close(addIndex);
    }
  })
})


//--------------------修改内容 -------------
//点击编辑按钮,出现弹层
let editIndex;
$('tbody').on('click', 'button:contains("编辑")', function () {
  //获取三个自定义属性值
  let shuju = $(this).data();//不给data()传递参数,表示获取全部的data-xxx属性
  //console.log(shuju);
  editIndex = layer.open({
    //设置弹层内容
    type: 1,
    title: '编辑分类',
    //设置弹出的内容
    content: $('#tpl-edit').html(), // 内容在HTML中
    area: ['500px', '250px'],
    //数据回填
    success: function () {
      //必须等弹层出来之后,保证表单已经存在,input已经出现了,在数据回填
      //使用layui的form模块,快速的数据回填
      let form = layui.form;
      form.val("edit", shuju);
    }
  });
});
//表单提交,完成修改
$('body').on('submit','#edit-form', function (e) {
  e.preventDefault();
  let data = $(this).serialize();
  //console.log(data);
  axios.post('/my/category/update', data).then(res => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      renderCategory();
      layer.close(editIndex);
    }
  })
})